<!-- 基础数据 -->
<template>
  <div class="base-data-wrap">
    <CustomTabs :tabList="handleTabList" :activeName="handleName" @tabSelect="handleTabSelected" />
    <div class="componen-wrap">
      <SteamEnthalpy v-if="handleName === 'SteamEnthalpy'" />
      <HotEnthalpy v-if="handleName === 'HotEnthalpy'" />
      <ScoalEcarbon v-if="handleName === 'ScoalEcarbon'" />
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import CustomTabs from "@/components/Tabs/index.vue";
import HotEnthalpy from "./components/hotEnthalpy.vue";
import ScoalEcarbon from "./components/scoalEcarbon.vue";
import SteamEnthalpy from "./components/steamEnthalpy.vue";

defineOptions({
  name: "ALL_ENERGY_BASE_DATA"
});

const handleTabList = ref([
  {
    name: "SteamEnthalpy",
    label: "蒸汽焓值"
  },
  {
    name: "HotEnthalpy",
    label: "热水焓值"
  },
  {
    name: "ScoalEcarbon",
    label: "能源系数"
  }
]);

const handleName = ref("SteamEnthalpy");

const handleTabSelected = val => {
  handleName.value = val;
};
</script>

<style lang="scss" scoped>
.base-data-wrap {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: calc(100vh - 133px);
  padding: 24px;
  background-color: #fff;
  border-radius: 8px;
}
</style>
